[data-tooltip] {
  position: relative;
  &:before{
    opacity: 0;
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 5;
    transform: rotate(45deg) scale(0);
    transition: all .1s ease;
  }
  &:after {
    position: absolute;
    z-index: 4;
    content: attr(data-tooltip);
    width: 200px;
    height: auto;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    color: rgba(0,0,0,.87);
    border: 1px solid #d4d4d5;
    line-height: 1.4285em;
    word-break: normal;
    white-space: normal;
    text-align: left;
    box-shadow: 0 2px 4px 0 rgba(34, 36, 38, .12), 0 2px 10px 0 rgba(34, 36, 38, .15);
    background-color: #fff;
    border-radius: 4px;
    opacity: 1;
    transition: all .1s ease;
  }
  &.fit-content:after{
    width: fit-content;
  }
  // bottom
  &[data-position="bottom"] {
    &:before{
      bottom: auto;
      right: auto;
      top: 100%;
      left: 50%;
      margin-top: 2px;
      margin-left: -10px;
      transform-origin: center bottom;
      box-shadow: -1px -1px 0 0 #bababc;
    }
    &:after {
      bottom: auto;
      right: auto;
      left: 50%;
      top: 100%;
      margin-top: 7px;
      transform: translateX(-50%) scale(0);
      transform-origin: center bottom;
    }
  }
  // top
  &[data-position="top"]{
    &:before{
      top: auto;
      right: auto;
      bottom: 100%;
      left: 50%;
      margin-bottom: 2px;
      margin-left: -10px;
      transform-origin: center top;
      box-shadow: 1px 1px 0 0 #bababc;
    }
    &:after{
      top: auto;
      right: auto;
      left: 50%;
      bottom: 100%;
      margin-bottom: 7px;
      transform: translateX(-50%) scale(0);
      transform-origin: center bottom;
    }
  }
  // left
  &[data-position="left"]{
    &:before{
      right: 100%;
      top: 50%;
      margin-right: 2px;
      margin-top: -1px;
      transform-origin: top center;
      box-shadow: 1px -1px 0 0 #bababc;
    }
    &:after{
      right: 100%;
      top: 50%;
      margin-right: 10px;
      transform: translateY(-50%) scale(0);
      transform-origin: right center;
    }
  }
  // right
  &[data-position="right"]{
    &:before{
      left: 100%;
      top: 50%;
      margin-left: 2px;
      margin-top: -1px;
      transform-origin: right center;
      box-shadow: -1px 1px 0 0 #bababc;
    }
    &:after{
      left: 100%;
      top: 50%;
      margin-left: 7px;
      transform: translateY(-50%) scale(0);
      transform-origin: left center;
    }
  }
  // 显示tooltip
  &:hover{
    &:before{
      transform: rotate(45deg) scale(1);
      opacity: 1;
    }
  }
  &[data-position="bottom"]:hover, &[data-position="top"]:hover{
    &:after{
      transform: translateX(-50%) scale(1);
    }
  }
  &[data-position="left"]:hover, &[data-position="right"]:hover{
    &:after{
      transform: translateY(-50%) scale(1);
    }
  }
}